<div class="main-content">
    <!-- 切换台页面 -->
    <div class="main-container" id="main-box">
        <div class="main-box">
            <img src="/image/logo-line-treak.png" alt="">
            <div style="">
                <div style="display: flex; flex-direction: row; justify-content: left; margin-top: 40px;">
                    <div style="width: 55%;">
                        <div class="form-row">
                            <div class="col-md-7">
                                <label for="stream-1-server">Server Address</label>
                                <input class="form-control" id="stream-1-server" type="text">
                            </div>
                            <div class="col-md-3">
                                <label for="stream-1-key">Stream Key</label>
                                <input class="form-control" id="stream-1-key" type="text">
                            </div>
<!--                            <div class="col-md-2 align-self-end">-->
<!--                                <button class="button-100-round" data-locale="module_key_chroma" id="stream-1"-->
<!--                                        style="margin: 0;">SAVE-->
<!--                                </button>-->
<!--                            </div>-->
                        </div>
                        <div class="form-row" style="margin-top: 20px;">
                            <div class="col-md-7">
<!--                                <label class="sr-only" for="stream-1-server">Server Address</label>-->
                                <input class="form-control" id="stream-2-server" type="text">
                            </div>
                            <div class="col-md-3">
<!--                                <label class="sr-only" for="stream-1-key">Stream Key</label>-->
                                <input class="form-control" id="stream-2-key" type="text">
                            </div>
                        </div>
                        <div class="form-row" style="margin-top: 20px;">
                            <div class="col-md-7">
<!--                                <label class="sr-only" for="stream-1-server">Server Address</label>-->
                                <input class="form-control" id="stream-3-server" type="text">
                            </div>
                            <div class="col-md-3">
<!--                                <label class="sr-only" for="stream-1-key">Stream Key</label>-->
                                <input class="form-control" id="stream-3-key" type="text">
                            </div>
                            <div class="col-md-2 align-self-end">
                                <button class="button-100-round" data-locale="module_key_chroma" id="stream-2"
                                        style="margin: 0;">SAVE
                                </button>
                            </div>
                        </div>
                    </div>
                    <div style="margin: 30px 0 0 60px;">
                        <div class="main-sub-box" style="margin-bottom: 10px;">
                            <button class="button-100-round" data-locale="module_key_chroma" id="rec">REC</button>
                            <button class="button-100-round" data-locale="module_key_chroma"
                                    id="stream">STREAM
                            </button>
                            <button class="button-100-round" data-locale="module_key_chroma" id="last"><</button>
                            <button class="button-100-round" data-locale="module_key_luma" id="play">PLAY</button>
                            <button class="button-100-round" data-locale="module_key_scene" id="next">></button>
                        </div>
                        <div class="main-sub-box">
                            <button class="button-100-round" id="udisk-space" style="width: 200px;">USB:0G/0G</button>
                            <button class="button-100-round" id="sdcard-space" style="width: 200px;">
                                SD:0G/0G
                            </button>
                        </div>
                    </div>
                    <div style="display: flex; flex-direction: column; align-items: center; margin-top: 10px; margin-left: 40px;">
                        <div>Tally</div>
                        <a id="tally-1" href="tally.html?id=1" target="_blank" style="width: 25px; height:25px; border-radius: 50%; background-color: #0A82FF; display: inline-block; color: white; margin: 3px;">1</a>
                        <a id="tally-2" href="tally.html?id=2" target="_blank" style="width: 25px; height:25px; border-radius: 50%; background-color: #0A82FF; display: inline-block; color: white; margin: 3px;">2</a>
                        <a id="tally-3" href="tally.html?id=3" target="_blank" style="width: 25px; height:25px; border-radius: 50%; background-color: #0A82FF; display: inline-block; color: white; margin: 3px;">3</a>
                        <a id="tally-4" href="tally.html?id=4" target="_blank" style="width: 25px; height:25px; border-radius: 50%; background-color: #0A82FF; display: inline-block; color: white; margin: 3px;">4</a>
                    </div>
                </div>
            </div>
            <div style="">
                <div style="display: flex; flex-direction: row; justify-content: left; margin-top: 10px;">
                    <div style="width: 46%;">
                        <div>Pull Stream</div>
                        <ul class="list-group list-group-flush">
                            <li class="list-group-item" style="padding: 0;">
                                <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text" id="basic-addon1" style="background-color: #08101D; color: #fff;"> 1&nbsp;</span>
                                </div>
                                <input aria-describedby="basic-addon1" aria-label="Username"
                                       class="form-control"
                                       id="pull-stream-1" placeholder="null" type="text">
                                </div>
                            </li>
                            <li class="list-group-item" style="padding: 0;">
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text" id="basic-addon2" style="background-color: #08101D; color: #fff;">2</span>
                                    </div>
                                    <input aria-describedby="basic-addon2" aria-label="Username"
                                           class="form-control"
                                           id="pull-stream-2" placeholder="null" type="text">
                                </div>
                            </li>
                            <li class="list-group-item" style="padding: 0;">
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text" id="basic-addon3" style="background-color: #08101D; color: #fff;">3</span>
                                    </div>
                                    <input aria-describedby="basic-addon3" aria-label="Username"
                                           class="form-control"
                                           id="pull-stream-3" placeholder="null" type="text">
                                </div>
                            </li>
                            <li class="list-group-item" style="padding: 0;">
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text" id="basic-addon4" style="background-color: #08101D; color: #fff;">4</span>
                                    </div>
                                    <input aria-describedby="basic-addon4" aria-label="Username"
                                           class="form-control"
                                           id="pull-stream-4" placeholder="null" type="text">
                                </div>
                            </li>
                            <li class="list-group-item" style="padding: 0;">
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text" id="basic-addon5" style="background-color: #08101D; color: #fff;">5</span>
                                    </div>
                                    <input aria-describedby="basic-addon5" aria-label="Username"
                                           class="form-control"
                                           id="pull-stream-5" placeholder="null" type="text">
                                </div>
                            </li>
                            <li class="list-group-item" style="padding: 0;">
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text" id="basic-addon6" style="background-color: #08101D; color: #fff;">6</span>
                                    </div>
                                    <input aria-describedby="basic-addon6" aria-label="Username"
                                           class="form-control"
                                           id="pull-stream-6" placeholder="null" type="text">
                                </div>
                            </li>
                        </ul>
                    </div>
                    <button class="button-100-round" data-locale="module_key_chroma" id="pull-stream-save"
                            style="margin: 100px 0 0 25px;">SAVE
                    </button>
                    <div style="width: 28%; margin-left: 40px;">
                        <div>Customized Channels name</div>
                        <div style="display: flex; flex-direction: row; justify-content: left;">
                            <div style=" margin-left: 40px;">
                                <ul class="list-group list-group-flush">
                                    <li class="list-group-item" style="padding: 0;">
                                        <input class="form-control" id="umd_pvw" placeholder="PVW" style="" type="text" pattern="[a-zA-Z0-9]{1,6}">
                                    </li>
                                    <li class="list-group-item" style="padding: 0;">
                                        <input class="form-control" id="umd_pgm" placeholder="PGM" style="" type="text">
                                    </li>
                                    <li class="list-group-item" style="padding: 0;">
                                        <input class="form-control" id="umd_in1" placeholder="IN1" style="" type="text">
                                    </li>
                                    <li class="list-group-item" style="padding: 0;">
                                        <input class="form-control" id="umd_in2" placeholder="IN2" style="" type="text">
                                    </li>
                                </ul>
                            </div>
                            <div style="">
                                <ul class="list-group list-group-flush">
                                    <li class="list-group-item" style="padding: 0;">
                                        <input class="form-control" id="umd_in3" placeholder="IN3" style="" type="text">
                                    </li>
                                    <li class="list-group-item" style="padding: 0;">
                                        <input class="form-control" id="umd_in4" placeholder="IN4" style="" type="text">
                                    </li>
                                    <li class="list-group-item" style="padding: 0;">
                                        <input class="form-control" id="umd_aux" placeholder="AUX" style="" type="text">
                                    </li>
                                    <li class="list-group-item" style="padding: 0;">
                                        <input class="form-control" id="umd_pat" placeholder="PAT" style="" type="text">
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div id="umd-error-message" class="invalid-feedback" style="display: flex; margin-left: 20px;">
                        </div>
                    </div>
                    <button class="button-100-round" data-locale="module_key_chroma" id="umd-save"
                            style="margin: 100px 0 0 25px;">SAVE
                    </button>
                </div>
            </div>


            <div style="display: flex; flex-direction: row; justify-content: left; margin-top: 40px;">
                <div style="display: flex; flex-direction: column; align-items: center;">
                    <div class="main-sub-box">
                        <button class="button-100-round" data-locale="module_key_chroma" id="luma-on-air" param="red">ON
                            AIR
                        </button>
                        <button class="button-100-round" data-locale="module_key_luma" id="chroma-on-air" param="red">ON
                            AIR
                        </button>
                        <button class="button-100-round" data-locale="module_key_scene" id="pip1-on-air" param="red">ON
                            AIR
                        </button>
                        <button class="button-100-round" data-locale="module_key_scene" id="pip2-on-air" param="red">ON
                            AIR
                        </button>

                    </div>
                    <div class="main-sub-box">
                        <button class="button-100-round" data-locale="module_key_chroma" id="luma">LUMA</button>
                        <button class="button-100-round" data-locale="module_key_luma" id="chroma">CHROMA</button>
                        <button class="button-100-round" data-locale="module_key_scene" id="pip1">PIP 1</button>
                        <button class="button-100-round" data-locale="module_key_scene" id="pip2">PIP 2</button>

                    </div>
                </div>
                <div style="display: flex; flex-direction: column; align-items: center; margin-left: 80px;">
                    <div class="main-sub-box">
                        <button class="button-100-round" data-locale="module_key_scene" id="dsk-on-air" param="red">ON
                            AIR
                        </button>
                        <button class="button-100-round" data-locale="module_key_scene" id="logo1-on-air" param="red">ON
                            AIR
                        </button>
                        <button class="button-100-round" data-locale="module_key_scene" id="logo2-on-air" param="red">ON
                            AIR
                        </button>
                    </div>
                    <div class="main-sub-box">
                        <button class="button-100-round" data-locale="module_key_scene" id="dsk">DSK</button>
                        <button class="button-100-round" data-locale="module_key_scene" id="logo1">LOGO 1</button>
                        <button class="button-100-round" data-locale="module_key_scene" id="logo2">LOGO 2</button>
                    </div>
                </div>
                <div style="display: flex; flex-direction: column; align-items: center; margin-left: 120px;">
                    <div class="main-sub-box">
                        <button class="button-100-round" data-locale="module_key_chroma" id="mix">MIX</button>
                        <button class="button-100-round" data-locale="module_key_luma" id="wipe">WIPE</button>
                        <button class="button-100-round" data-locale="module_key_scene" id="dip">DIP</button>
                    </div>
                    <div class="main-sub-box">
                        <button class="button-100-round" data-locale="module_key_chroma" id="0-5s">0.5S</button>
                        <button class="button-100-round" data-locale="module_key_luma" id="1-0s">1.0S</button>
                        <button class="button-100-round" data-locale="module_key_scene"
                                id="custom">CUSTOM
                        </button>
                    </div>
                </div>
            </div>
            <div style="display: flex; flex-direction: row; justify-content: left; margin-top: 20px;">
                <div style="display: flex; flex-direction: column; align-items: center;">
                    <div class="main-sub-box">
                        <button class="button-200" data-locale="module_key_chroma" id="pgm-1"
                                param="red">PGM 1
                        </button>
                        <button class="button-200" data-locale="module_key_luma" id="pgm-2"
                                param="red">PGM 2
                        </button>
                        <button class="button-200" data-locale="module_key_scene" id="pgm-3"
                                param="red">PGM 3
                        </button>
                        <button class="button-200" data-locale="module_key_scene" id="pgm-4"
                                param="red">PGM 4
                        </button>
                    </div>
                    <div class="main-sub-box">
                        <button class="button-200" data-locale="module_key_chroma" id="pvw-1"
                                param="green">PVW 1
                        </button>
                        <button class="button-200" data-locale="module_key_luma" id="pvw-2"
                                param="green">PVW 2
                        </button>
                        <button class="button-200" data-locale="module_key_scene" id="pvw-3"
                                param="green">PVW 3
                        </button>
                        <button class="button-200" data-locale="module_key_scene" id="pvw-4"
                                param="green">PVW 4
                        </button>
                    </div>
                </div>
                <div style="display: flex; flex-direction: column; align-items: center; margin-left: 70px;">
                    <div class="main-sub-box">
                        <div style="display: flex; flex-direction: column; align-items: center;">
                            <div class="main-sub-box">
                                <button class="button-100-round" data-locale="module_key_chroma" id="pgm-aux"
                                        param="red">AUX
                                </button>
                                <button class="button-100-round" data-locale="module_key_chroma" id="still">STILL
                                </button>
                                <button class="button-100-round" data-locale="module_key_chroma" id="prev">PREV
                                </button>
                            </div>
                            <div class="main-sub-box">
                                <button class="button-100-round" data-locale="module_key_chroma" id="pgm-pat"
                                        param="red">PAT
                                </button>
                                <button class="button-100-round" data-locale="module_key_chroma" id="grab">GRAB
                                </button>
                                <button class="button-100-round" data-locale="module_key_chroma" id="bkgd">BKGD
                                </button>
                            </div>
                        </div>
                        <div class="main-sub-box">
                            <button class="button-200" data-locale="module_key_chroma" id="ftb" param="red">
                                FTB
                            </button>
                        </div>
                    </div>
                    <div class="main-sub-box">
                        <div style="display: flex; flex-direction: column; align-items: center;">
                            <button class="button-100-round" data-locale="module_key_chroma" id="pvw-aux" param="green">
                                AUX
                            </button>
                            <button class="button-100-round" data-locale="module_key_chroma" id="pvw-pat" param="green">
                                PAT
                            </button>
                        </div>
                        <button class="button-200" data-locale="module_key_luma" id="cut" param="red">
                            CUT
                        </button>
                        <button class="button-200" data-locale="module_key_luma" id="auto" param="red">
                            AUTO
                        </button>
                    </div>
                </div>
            </div>

<!--            <div style="display: flex; flex-direction: column; align-items: center; margin-top: 20px; translate: 600px -800px;">-->
<!--                <div>Tally</div>-->
<!--                <a id="tally-1" href="#" style="text-align: center;">1</a>-->
<!--                <a id="tally-2" href="#" style="text-align: center;">2</a>-->
<!--                <a id="tally-3" href="#" style="text-align: center;">3</a>-->
<!--                <a id="tally-4" href="#" style="text-align: center;">4</a>-->
<!--            </div>-->


            <div class="transitions_slider">
                <div style="position: absolute; width: 280px; height: 12px; background: #0A82FF; border-radius: 2px; top: 14px; left: 20px;"></div>
                <input id="putter" max="255" min="0" name="main-transitions" step="1" type="range" value="0"/>
            </div>

            <!--            <div style="display: flex; flex-direction: row; justify-content: left; margin-top: 20px;">-->
            <!--                <div style="width: 60%;">-->
            <!--                    <div class="form-inline">-->
            <!--                        <div class="form-group mb-2">-->
            <!--                        <label class="my-1 mr-2" for="stream_select">Pull Stream</label>-->
            <!--                        <select class="custom-select my-1 mr-sm-2" id="stream_select">-->
            <!--                            <option selected>Choose...</option>-->
            <!--                            <option value="1">1</option>-->
            <!--                            <option value="2">2</option>-->
            <!--                            <option value="3">3</option>-->
            <!--                            <option value="4">4</option>-->
            <!--                            <option value="5">5</option>-->
            <!--                            <option value="6">6</option>-->
            <!--                        </select>-->
            <!--                        </div>-->
            <!--                        <div class="form-group mb-2 w-50">-->
            <!--                            <label class="sr-only" for="pull_stream">Server Address</label>-->
            <!--                            <input class="form-control form-control-sm w-100" id="pull_stream" type="text" placeholder="Stream Url">-->
            <!--                        </div>-->
            <!--                        <div class="form-group mb-2">-->
            <!--                            <button class="button-100-round" data-locale="module_key_chroma" id="pull_stream_save"-->
            <!--                                    style="margin: 0 0 0 30px;">SAVE-->
            <!--                            </button>-->
            <!--                        </div>-->
            <!--                    </div>-->
            <!--                    <div class="form-inline">-->
            <!--                        <div class="form-group mb-2">-->
            <!--                        <label class="my-1 mr-2" for="umd_select">UMD Name</label>-->
            <!--                        <select class="custom-select my-1 mr-sm-2" id="umd_select">-->
            <!--                            <option selected>Choose...</option>-->
            <!--                            <option value="1">PVW</option>-->
            <!--                            <option value="2">PGM</option>-->
            <!--                            <option value="3">IN1</option>-->
            <!--                            <option value="4">IN2</option>-->
            <!--                            <option value="5">IN3</option>-->
            <!--                            <option value="6">IN4</option>-->
            <!--                            <option value="7">AUX</option>-->
            <!--                            <option value="8">PAT</option>-->
            <!--                        </select>-->
            <!--                        </div>-->
            <!--                        <div class="form-group mb-2 w-50">-->
            <!--                            <label class="sr-only" for="umd">UMD Name</label>-->
            <!--                            <input class="form-control w-100" id="umd" type="text" placeholder="UMD Name">-->
            <!--                        </div>-->
            <!--                        <div class="form-group mb-2">-->
            <!--                            <button class="button-100-round" data-locale="module_key_chroma" id="umd_save"-->
            <!--                                    style="margin: 0 0 0 30px;">SAVE-->
            <!--                            </button>-->
            <!--                        </div>-->
            <!--                    </div>-->
            <!--                </div>-->
            <!--            </div>-->
        </div>
    </div>
</div>



